﻿@{
  ViewData["Title"] = "Profile";
  ViewData["PageName"] = "page_profile";
  ViewData["Heading"] = "<i class='subheader-icon fal fa-plus-circle'></i>  Profile";
  ViewData["PageDescription"] = "Profile layout";
  ViewData["Category1"] = "Page Views";
}
@section HeadBlock {
  <link rel="stylesheet" media="screen, print" href="~/css/fa-brands.css">
  <link rel="stylesheet" media="screen, print" href="~/css/fa-solid.css">
  <link href="~/css/formplugins/cropperjs/cropper.css" rel="stylesheet" />
  <style>
    a.color-white:hover {
      color: white;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .overlay {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.5);
      overflow: hidden;
      height: 0;
      transition: .5s ease;
      width: 100%;
    }

    .avatars:hover .overlay {
      height: 50%;
      cursor: pointer;
    }

    .avatars {
      position: relative;
      border-radius: 50%;
    }

    .text {
      color: #333;
      position: absolute;
      top: 30%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }

    img {
      display: block !important;
      /* This rule is very important, please don't ignore this */
      max-width: 100%;
    }
  </style>
}
<div class="row">
  <div class="col-lg-6 col-xl-3 order-lg-1 order-xl-1">
    <div class="card mb-g rounded-top">
      <div class="row no-gutters row-grid">
        <div class="col-12">
          <div class="d-flex flex-column align-items-center justify-content-center p-4">
            <div class="avatars">
              <img id="avatar_lg" src="~/img/avatars/@(ViewBag.Avatar)" asp-append-version="true"
                   style="width:129.5px"
                   class="rounded-circle shadow-2 img-thumbnail" alt="">

              <div class="overlay">
                <div class="text">
                  <h5 class="mb-0 fw-700 text-center mt-3">
                    单击修改照片
                  </h5>
                </div>
              </div>
              <input type="file" name="upload_avatar" class="image" id="upload_avatar" style="display:none" />
            </div>
            <h5 class="mb-0 fw-700 text-center mt-3">
              @ViewBag.GivenName
              <small class="text-muted mb-0"> @ViewBag.Role</small>
            </h5>
            <div class="mt-4 text-center demo">
              <a href="javascript:void(0);" class="fs-xl" style="color:#3b5998">
                <i class="fab fa-facebook"></i>
              </a>
              <a href="javascript:void(0);" class="fs-xl" style="color:#38A1F3">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="javascript:void(0);" class="fs-xl" style="color:#db3236">
                <i class="fab fa-google-plus"></i>
              </a>
              <a href="javascript:void(0);" class="fs-xl" style="color:#0077B5">
                <i class="fab fa-linkedin-in"></i>
              </a>
              <a href="javascript:void(0);" class="fs-xl" style="color:#000000">
                <i class="fab fa-reddit-alien"></i>
              </a>
              <a href="javascript:void(0);" class="fs-xl" style="color:#00AFF0">
                <i class="fab fa-skype"></i>
              </a>
              <a href="javascript:void(0);" class="fs-xl" style="color:#0063DC">
                <i class="fab fa-flickr"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="text-center py-3">
            <h5 class="mb-0 fw-700">
              764
              <small class="text-muted mb-0">Connections</small>
            </h5>
          </div>
        </div>
        <div class="col-6">
          <div class="text-center py-3">
            <h5 class="mb-0 fw-700">
              1,673
              <small class="text-muted mb-0">Followers</small>
            </h5>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3 text-center">
            <a href="javascript:void(0);" class="btn-link font-weight-bold">Follow</a> <span class="text-primary d-inline-block mx-3">&#9679;</span>
            <a href="javascript:void(0);" class="btn-link font-weight-bold">Message</a> <span class="text-primary d-inline-block mx-3">&#9679;</span>
            <a href="javascript:void(0);" class="btn-link font-weight-bold">Connect</a>
          </div>
        </div>
      </div>
    </div>


  </div>
  <div class="col-lg-12 col-xl-6 order-lg-3 order-xl-2">
    <div class="card mb-g">
      <div class="row row-grid no-gutters">
        <div class="col-12">
          <div class="p-3">
            <h2 class="mb-0 fs-xl">
              Current Project
            </h2>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <h5 class="text-danger">
              Xray improvement algorythm
              <small class="mt-0 mb-3 text-muted">
                Migration of new API to local servers
              </small>
              <span class="badge badge-danger fw-n position-absolute pos-top pos-right mt-3 mr-3">Delayed</span>
            </h5>
            <div class="row fs-b fw-300">
              <div class="col text-left">
                Progress
              </div>
              <div class="col text-right">
                26%
              </div>
            </div>
            <div class="progress progress-xs d-flex mb-2 mt-1">
              <span class="progress-bar bg-danger-500 progress-bar-striped" role="progressbar" style="width: 26%" aria-valuenow="26" aria-valuemin="0" aria-valuemax="100"></span>
            </div>
            <div class="fw-300 mb-3">
              <div class="row">
                <div class="col">
                  Budget
                </div>
                <div class="col text-right text-danger">
                  -$155,473.70
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <h5>
              Radioactive Isotope Research
              <small class="mt-0 mb-3 text-muted">
                Accelerator based methods of Technetium99m production – target preparation and processing and beam monitoring technologies
              </small>
              <span class="badge badge-primary fw-n position-absolute pos-top pos-right mt-3 mr-3">A</span>
            </h5>
            <div class="row fs-b fw-300">
              <div class="col text-left">
                Progress
              </div>
              <div class="col text-right">
                90%
              </div>
            </div>
            <div class="progress progress-xs d-flex mb-2 mt-1">
              <span class="progress-bar bg-primary-500 progress-bar-striped" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
            </div>
            <div class="fw-300 mb-0">
              <div class="row">
                <div class="col">
                  Budget
                </div>
                <div class="col text-right">
                  $1,325,987.30
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3 text-center">
            <div class="text-left fw-400 ">
              <div class="text-secondary mb-1">Project Owners</div>
              <div class="fs-sm d-flex align-items-center">
                <a href="#" class="btn-m-s">
                  <img src="~/img/demo/avatars/avatar-a.png" class="profile-image-sm rounded-circle" alt="aa">
                </a>
                <a href="#" class="btn-m-s">
                  <img src="~/img/demo/avatars/avatar-b.png" class="profile-image-sm rounded-circle" alt="aa">
                </a>
                <a href="#" class="btn-m-s">
                  <img src="~/img/demo/avatars/avatar-c.png" class="profile-image-sm rounded-circle" alt="aa">
                </a>
                <a href="#" class="btn-m-s">
                  <img src="~/img/demo/avatars/avatar-e.png" class="profile-image-sm rounded-circle" alt="aa">
                </a>
                <a href="#" class="btn-m-s">
                  <img src="~/img/demo/avatars/avatar-h.png" class="profile-image-sm rounded-circle" alt="aa">
                </a>
                <a href="#" class="btn-m-s">
                  <img src="~/img/demo/avatars/avatar-k.png" class="profile-image-sm rounded-circle" alt="aa">
                </a>
                <a href="#" class="btn-m-s fs-xs">
                  <span data-hasmore="+7" class="rounded-circle profile-image-sm">
                    <img src="~/img/demo/avatars/avatar-j.png" class="profile-image-sm rounded-circle" alt="aa">
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-xl-3 order-lg-2 order-xl-3">
    <div class="card mb-2">
      <div class="card-body">
        <a href="javascript:void(0);" class="d-flex flex-row align-items-center">
          <div class='icon-stack display-3 flex-shrink-0'>
            <i class="@(Settings.Theme.IconPrefix) fa-circle icon-stack-3x opacity-100 color-primary-400"></i>
            <i class="fas fa-graduation-cap icon-stack-1x opacity-100 color-primary-500"></i>
          </div>
          <div class="ml-3">
            <strong>
              Add Qualifications
            </strong>
            <br>
            Adding qualifications will help gain more clients
          </div>
        </a>
      </div>
    </div>
    <div class="card mb-g">
      <div class="card-body">
        <a href="javascript:void(0);" class="d-flex flex-row align-items-center">
          <div class='icon-stack display-3 flex-shrink-0'>
            <i class="@(Settings.Theme.IconPrefix) fa-circle icon-stack-3x opacity-100 color-warning-400"></i>
            <i class="fas fa-handshake icon-stack-1x opacity-100 color-warning-500"></i>
          </div>
          <div class="ml-3">
            <strong>
              Add Skills
            </strong>
            <br>
            Gain more potential clients by adding skills
          </div>
        </a>
      </div>
    </div>
    <div class="card mb-g">
      <div class="row row-grid no-gutters">
        <div class="col-12">
          <div class="p-3">
            <h2 class="mb-0 fs-xl">
              @(Settings.Theme.User)'s Rating
            </h2>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3 d-flex text-primary align-items-center fs-xl">
            <i class="fas fa-star mr-1"></i>
            <i class="fas fa-star mr-1"></i>
            <i class="fas fa-star mr-1"></i>
            <i class="fas fa-star mr-1"></i>
            <i class="@(Settings.Theme.IconPrefix) fa-star mr-1"></i>
            <span class="ml-auto">4/5 Stars</span>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <div class="fw-500 fs-xs">Staff</div>
            <div class="progress progress-xs mt-2">
              <div class="progress-bar bg-primary-300 bg-primary-gradient" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <div class="fw-500 fs-xs">Punctuality</div>
            <div class="progress progress-xs mt-2">
              <div class="progress-bar bg-primary-300 bg-primary-gradient" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <div class="fw-500 fs-xs">Helpfulness</div>
            <div class="progress progress-xs mt-2">
              <div class="progress-bar bg-primary-300 bg-primary-gradient" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <div class="fw-500 fs-xs">Knowledge</div>
            <div class="progress progress-xs mt-2">
              <div class="progress-bar bg-primary-300 bg-primary-gradient" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3">
            <div class="fw-500 fs-xs">Bedside manners</div>
            <div class="progress progress-xs mt-2">
              <div class="progress-bar bg-danger-300 bg-warning-gradient" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="p-3 text-center">
            <a href="javascript:void(0);" class="btn-link font-weight-bold">View all</a>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="modal fade copper-modal-right" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
  <div class="modal-dialog modal-dialog-right  ">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title h4">修改照片</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="fal fa-times"></i></span>
        </button>
      </div>
      <div class="modal-body">
        <div class="panel-container show">
          <div class="panel-content">
            <div class="row">
              <div class="col-12">
                <div class="img-container">

                  <img id="upload_avatar_image" />
                </div>
              </div>

            </div>
          </div>
        </div>

        <div class="card mb-g">
          <div class="card-body p-3">
            <div class="row">
              <div class="col-12">
                <div class="docs-preview clearfix">
                  <div class="img-preview preview-lg"></div>
                  <div class="img-preview preview-md"></div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">Close</button>
        <button type="button" id="getcoppedbutton" class="btn btn-primary waves-effect waves-themed">确认</button>
      </div>
    </div>
  </div>
</div>
@section ScriptsBlock {
  <script src="~/js/formplugins/cropperjs/cropper.js"></script>
  <script>
    $(() => {
      let image = document.getElementById('upload_avatar_image');
      let avatarimg = document.getElementById('avatar_lg');

      let av = document.getElementById('upload_avatar_image');
      let $modal = $('.copper-modal-right');
      let cropper = null;
      $('.avatars > .overlay').click(function () {
        document.getElementById('upload_avatar').click();
      })
      $(document).on('show.bs.modal', '.modal', function (event) {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function () {
          $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
      });
      $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
          aspectRatio: 1,
          viewMode: 1,
          preview: '.img-preview',
          width: 120,
          height: 120,
        });
      }).on('hidden.bs.modal', function () {
        cropper.destroy();
        cropper = null;
      });
      $('#upload_avatar').change(function (event) {
        var files = event.target.files;
        var done = function (url) {
          image.src = url;
          $modal.modal('toggle')
        };
        if (files && files.length > 0) {
          reader = new FileReader();
          reader.onload = function (event) {
            done(reader.result);
          };
          reader.readAsDataURL(files[0]);
        }
      });
      $('#getcoppedbutton').click(function () {
        const base64str = cropper.getCroppedCanvas().toDataURL();
        avatarimg.src = base64str;
        $.post('/Account/UpdateAvatar', { base64str: base64str }).done(res => {
          $modal.modal('toggle');

        });



      });



    })
  </script>
}
